<template>
  <div>
    <transition enter-active-class="animate__animated animate__fadeInLeft">
      <router-view></router-view>
    </transition>
    <footer>
      <router-link to="home" active-class="active" class="a">商城</router-link>
      <router-link to="cate" active-class="active" class="a">分类</router-link>
      <router-link to="shop" active-class="active" class="a">购物车</router-link>
      <router-link to="mine" active-class="active" class="a">我</router-link>
    </footer>
  </div>
</template>

<script>
export default {
  // mounted(){
  //   console.log(1);
  // }
};
</script>

<style scoped>
footer {
  display: flex;
  justify-content: space-around;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  font-size: 0.42rem;
  background-color: white;
}
footer > .a {
  flex: 1;
  font-size: 0.32rem;
  text-align: center;
  color: gray;
  padding: 0.2rem 0;
}
.active {
  background-color: #ff6040;
  color: white !important;
}
</style>